<template>
    <div class="ph-input-wrap" data-ph="datetime-picker">
        <ph-input :placeholder="placeholder" :value="dirtyValue" :readonly="true" :disabled="disabled" @click.stop="onClick"/>
        <ph-datetime-button 
            class="ph-input-raddon" 
            :theme="theme" 
            :weekText="weekText"
            :importants="importants"
            :now="now"
            :clear="clear"
            :min="min" 
            :max="max" 
            :value="dirtyValue" 
            :type="type" 
            :format="vfmt" 
            :disabled="disabled"
            @pick="onPick" 
            @clear="onClear"
            />
    </div>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, computed } from 'vue'
import { PhDatetimeButton } from '../base'
import { datefmt, DTFormat } from 'ph-datetime-util'
import PhInput from './input.vue'
export default defineComponent({
    props:{
        placeholder:{type:String},
        disabled:{type:Boolean,default:false},
        value:{type:String},
        min:{type:String},
        max:{type:String},
        theme:{type:String},
        weekText:{
            type:Array as PropType<Array<string>>
        },
        importants:{
            type:Array as PropType<Array<{title:string|number,md:string,desc:string}>>
        },
        clear:{
            type:Boolean,
            default:true
        },
        now:{
            type:Boolean,
            default:true
        },
        type:{type:String,default:"datetime"},
        format:{type:String},
    },
    setup(props,{emit}) {
        const vfmt = computed(()=>{
            return props.format||DTFormat[props.type]
        })
        const dirtyValue = ref(props.value)
        const onPick = (v:{[k:string]:number})=>{
            dirtyValue.value = datefmt(v,vfmt.value)
            emit("change",dirtyValue.value)
        }
        const onClear = ()=>{
            dirtyValue.value = ""
            emit("change","")
        }
        const onClick = (e:Event)=>{
            if(props.disabled)return
            (e as any).target.nextElementSibling.click()
        }
        return {onPick,onClear,onClick,dirtyValue,vfmt}
    },
    components:{
        PhInput,
        PhDatetimeButton
    }
})
</script>